
<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<link href="../css/main.css" type="text/css" rel="stylesheet" />
		<link href="../css/dialog.css" rel="stylesheet" type="text/css">
		<link rel="stylesheet" href="../css/zTreeStyle/zTreeStyle.css" type="text/css">
		
		<title></title>
		<style type="text/css">
			
			a{ text-decoration:none;}
			.img_div{
			height:300px;
			}
			.hide{display: none;}
			

			.right_div{
				    width: 98%;
    margin-left: 1%;
     background-color:rgb(242,243,248);


			}

			textarea{/* width: 340px; */width: 333px;height: 100px;border: #a6d9da solid 1px;padding: 5px;}
			.textarea1{border:none;resize : none;overflow-y:visible }
			
    *, *::before, *::after{
    	box-sizing: inherit
    }

    .portlet-body-left {
    width: 230px;
    float: left;
    position: fixed;
    background-color:rgb(242,243,248);
	}

	.search .searchImg {
    position: absolute;
    margin: 7px;
    width: 16px;
    height: 16px;
    background: url(../images/search.png) no-repeat;
}	

 .searchInput {
    width: 230px;
    height: 30px;
    margin-bottom: 5px;
}

.form-control[_ngcontent-c2] {
    border: none;
    text-indent: 30px;
    height: 30px;
    font-size: 14px;
    line-height: 1.42857;
    color: #555555;
    display: block;
    text-align: start;
    width: 100%;
    margin: 0 auto;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    border:none;
 	border:0px;
    outline:none;
}

.form-control {
    display: block;
   
    padding: 0.35rem 1.5rem;
    font-size: 1rem;
    line-height: 1.25;
    color: #495057;
    background-color: #fff;
    background-image: none;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 0.25rem;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    outline:medium;
}
.leftPadding {
    padding: 12px 10px 15px 10px;
    overflow: auto;
}
.treeDiv[_ngcontent-c2] {
    width: 230px;
}
.portlet.light {
    margin-bottom: 0;
}
.fc-bg-FF {
    background-color: #fff;
}

.btn-group{margin-left: -10px;}

.btn.btn-secondary {
    border-color: transparent;
    border-bottom-width: 2px;
    border-bottom-style: solid;
    border-bottom-color: transparent;
    opacity: 1;
    margin-right: 20px;
    margin-left: 15px;
    padding: 0.65rem 0;
}

.btn-secondary {
	width:inherit;
    background: white;
    cursor:pointer;
}

/* .btn:focus,.btn:active:focus,.btn.active:focus,.btn.focus,.btn:active.focus,.btn.active.focus, */.btnActive { 
                       outline: none;   
                        border-color: transparent;  
                        box-shadow:none;
                   border-bottom-color: #4d86ee !important;
    color: #4d86ee;
                   }

.row {
    display: -webkit-box;
    display: -ms-flexbox;
    /* display: flex; */
    -ms-flex-wrap: wrap;
    /* flex-wrap: wrap; */
    /* margin-right: -15px; */
    margin-left: -15px;
}
.portlet-body-right {
    margin-left: 230px;
   /* background-color:rgb(242,243,248);*/
}

.col-xl-padding {
    padding-left: 10px;
    padding-bottom: 10px;
    padding-right: 0px;
}

.col-xl-4 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 33.33333%;
    flex: 0 0 33.33333%;
    /* max-width: 33.33333%; */
}

.col-lg-12 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
}

.col-xl-8 {
    /* -webkit-box-flex: 0; */
    -ms-flex: 0 0 66.66667%;
    /* flex: 0 0 66.66667%; */
    max-width: 66.66667%;
}

.m-portlet .m-portlet__head .m-portlet__head-caption .m-portlet__head-title .m-portlet__head-text {
    display: table-cell;
    vertical-align: middle;
    /* font-size: 1.3rem; */
    /* font-weight: 500; */
    /* font-family: Roboto; */
}
.m-portlet__head-text {
    color: #575962;
}
h4{margin-left: 5px;    font-size: 1.5rem;display: table-cell;
    vertical-align: middle;}

.col-lg-12{
	position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

.alarmInfo-body[_ngcontent-c2] {
    /* min-height: 328px; */
}
.portlet-body-right[_ngcontent-c2] {
    margin-left: 230px;
}

.nav.nav-pills, .nav.nav-tabs {
    margin-bottom: 20px;
}
.m-tabs-line {
    border-bottom: 1px solid #ebedf2;
}
.m-tabs-line {
    margin: 0 0 25px 0;
}
.nav-tabs {
    border-bottom: 1px solid #ebedf2;
}
.nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}
ol, ul, dl {
    margin-top: 0;
    margin-bottom: 1rem;
}
.m-tabs-line .m-tabs__item {
    margin-right: 30px;
    margin-bottom: -1px;
}

 .nav-link {
    color: #6f727d;
    padding: 0.5rem 1rem;
}

.nav-item {
	line-height: 47px;
}

.table {
    width: 100%;
    max-width: 100%;
    margin-bottom: 1rem;
    background-color: transparent;
}

 .col-xl-padding {
    padding-left: 10px;
    padding-bottom: 10px;
    /*padding-right: 0px;*/}

    .col-xl-4 {
     -webkit-box-flex: 0; 
    -ms-flex: 0 0 33.33333%;
    flex: 0 0 33.33333%;
     max-width: 33.33333%; 
}

.col-lg-12 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
  /*  max-width: 100%;*/
}

.col-xl-12, .col-xl, .col-xl-auto {
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}


.alarmInfo-body{
    min-height: 328px;
}
.portlet-body-right{
    margin-left: 230px;
}
.active{
	 padding-bottom:15px; border-bottom:1px solid #000;
}
h3{
    font-weight: bolder;
        font-size: 1.75rem;
}
h1 {
    padding-left: 50px;
    margin-top: 30px;
    font-weight: bolder;
    font-size: 45px;
    color: #f34e78;
}
.warnCount {
    margin-left: 20px;
    font-weight: bolder;
    font-size: 20px;
    color: #f34e78;
     margin-top: 0;
    margin-bottom: 1rem;
}
.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.form-group {
    margin-bottom: 1rem;
}

h5 {
    font-weight: bold;
    font-size: 16px;
    color: #333333;
    margin-bottom: 25px;
}
.col-xl-3 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

 .device-maintenancePlan label {
     font-size: 14px; 
    color: #666666;
}
.form-group label {
    position: relative;
}
label {
    display: inline-block;
    margin-bottom: .5rem;
}
.devicePlan-info {
    background-color: #fbfcfb;
    padding: 0 10px;
    border-radius: 5px;
    border: 1px solid #ddd;
    height: 36px;
    line-height: 36px;
    margin-bottom: 20px;
}

.hisSearchBtn{
margin-left: 50px;
    background-color: #4d86ee;
    border-color: #4d86ee;
    color: #fff;
    height: 30px;
    width: 100px;}
    
    .table-scrollable{
    max-height: 250px;
    position:relative;
    overflow-y :auto
    }
     .table-scrollable1{
    max-height: 500px;
    position:relative;
    overflow-y :auto
    }
    .red{color: red !important;}
		</style>
	</head>
	<body>
		<div class="main_frame">
			<div class="position_div">
				<img src="../images/position_icon.png" />
				<i>服务项目</i><i>&gt;&gt;</i><i>服务项目管理</i>
			</div>
			<div class="right_div">
				
			
					<div class="portlet-body-left">
						<div class="search">
            			<div  class="searchImg"></div>
            			<div  class="form-group searchInput">
               			 	<input  class="form-control fc-Form "  id ="key" type="text" placeholder="设备名称" style="width: 180px;">
            			</div>
        				</div>

        				<div  class="portlet light leftPadding treeDiv fc-bg-FF" style="width: 210px">
        					<div  class="btn-group">
                			<!-- <button  class="btn btn-secondary" data-status="1">地区</button> -->
                			<button class="btn btn-secondary btnActive" data-status="2">用户</button>
                            <button  class="btn btn-secondary" data-status="3">项目</button>
            				</div>
           
       				 	</div>
       				 	<div class="content_wrap">
							<ul id="treeDemo" class="ztree"></ul>
						</div>
       				 	
					</div>

				
				<div class="portlet-body-right row">
					 
					 
            	<div class="col-xl-8 col-lg-12 sortable col-xl-padding " id="ConfigurationScreenDiv" style="height: 520px;width: 560px;">
                <div  id="configure-portlet" class ="fc-bg-FF">
                    <div  class="m-portlet__head" style="padding: 10px 0;margin-left: 10px">
                        <div  class="m-portlet__head-caption">
                            <div class="m-portlet__head-title">
                            <h4  class="m-portlet__head-text">设备详情</h4>
                       
                            </div>
                        </div>
                       
                    </div>
                    <div  style="margin-left: 10px">
                      <img class="img_div" src =""  alt="FBox未绑定" id="device_img"/>
                    </div>
                    <div class="fc-bg-FF table-scrollable" style="height: 170px;" >
                    <table class="table alarmTable table_list ">
                    <tbody id="current_data"></tbody>
                    </table>
                    </div>
                </div>
            </div>
            <!----><div class="col-lg-12 sortable col-xl-padding col-xl-4 ng-tns-c2-4 fc-bg-FF" id="DeviceInfoDiv" style="height: 510px;">
              		<div class="fc-bg-FF table-scrollable1" style="height: 500px;" >
            			<table class="table alarmTable table_list ">
                    <tbody id="current_data_zt"></tbody>
                    </table>
                    </div>
             <!--    <div  class="portlet portlet-sortable light bordered full-page fc-bg-FF" >
                    <div  class="alarmTotal">
                        <h3  class="ng-tns-c2-4"></h3>
                        <h1  class="ng-tns-c2-4" id="warn_count">0</h1>
                        <p  class="ng-tns-c2-4 warnCount">
                            <i  class="fa fa-warning"></i>报警统计
                        </p>
                    </div>
                    <div class="deviceInfo">
                        <ul class="ng-tns-c2-4">
                           <li class="ng-tns-c2-4">
                                <span class="ng-tns-c2-4">设备模板:</span>
                                <span  class="ng-tns-c2-4" data-name="model_name"></span>
                            </li>
                            <li class="ng-tns-c2-4">
                                <span  class="ng-tns-c2-4">设备序列号:</span>
                                <span class="ng-tns-c2-4" data-name="serialNumber"></span>
                            </li>
                           
                            <li  class="ng-tns-c2-4">
                                <span  class="ng-tns-c2-4">设备地点:</span>
                                <span class="ng-tns-c2-4" data-name="address"></span>
                            </li>
                            <li class="ng-tns-c2-4">
                                <span  class="ng-tns-c2-4">备注:</span>
                                <span class="ng-tns-c2-4" data-name="mark"></span>
                            </li>
                        </ul>
                        <a  class="ng-tns-c2-4" style="position:absolute;right:30px;bottom:30px;cursor: pointer;" href='deviceList' target='mainFrame'>设备管理 &gt;</a>
                    </div>
                </div> -->
            </div>
        </div>


		<div class="ng-tns-c2-4" id="AlarmInfoDiv" style="padding: 0px 0px 0px 10px;margin-right: -15px;">
        <div  class="portlet-body-right alarmInfo-body fc-bg-FF">
            <div class="ng-tns-c2-4" style="padding: 0 0 0 10px;">
                <tabset  class="tab-container tabbable-line">
                	<ul class="nav m-tabs-line nav-tabs"> <!---->
                		<li class="nav-item m-tabs__item " data-name="currentalarm"> 
                			<a class="nav-link active m-tabs__link" href="javascript:void(0);" id=""> <span>当前报警</span> </a> 
                		</li>
                		<li class="nav-item m-tabs__item" data-name="historyalarm">
                			<a class="nav-link m-tabs__link" href="javascript:void(0);" id=""> <span>历史报警</span></a>
                		</li>
                		<li class="nav-item m-tabs__item" data-name="historydata"> 
                			<a class="nav-link m-tabs__link" href="javascript:void(0);" id=""> <span>历史数据</span>  </a>
                		 </li>
                		<li class="nav-item m-tabs__item" data-name="device-maintenance-plan">
                		 <a class="nav-link m-tabs__link" href="javascript:void(0);" id=""> 
                		 <span>设备信息</span> <!----> </a>
                		 </li>
                		<li class="nav-item m-tabs__item" data-name="maintenance-records">
                		 <a class="nav-link m-tabs__link" href="javascript:void(0);" id=""> <span>维保档案</span>  </a> 
                		</li>
                	 </ul>
                	<div class="tab-content"> 
                    <tab  class="ng-tns-c2-4 m-tabs__item  tab-pane ">
                    	<currentalarm  class="ng-tns-c3-5 ng-tns-c2-4">
                     	<div class="currentAlarm-portlet-table">
    						<div class="portlet-body">
       							<div class="table-scrollable">
            						<table class="table alarmTable table_list ">
					                	<thead class="ng-tns-c3-5">
					                    <tr class="ng-tns-c3-5">
					                        <th class="ng-tns-c3-5">名称</th>
					                        <th class="ng-tns-c3-5">状态</th>
					                        <th class="ng-tns-c3-5">报警内容</th>
					                        <th class="ng-tns-c3-5">值</th>
					                        <th class="ng-tns-c3-5">报警时间</th>
					                        <th class="ng-tns-c3-5">标记为</th>
					                    </tr>
					                	</thead>
	                					<tbody class="ng-tns-c3-5" id="curr_warn">
	                					</tbody>
            						</table>
        					 	</div>
   						 	</div>
						</div>
						</currentalarm>
                    </tab>
                    <tab  class="ng-tns-c2-0 m-tabs__item tab-pane hide">
                     <historyalarm  class="ng-tns-c4-2 ng-tns-c2-0 ng-star-inserted" >
                     <div class="hisortyAlarmTable" id="historyalarm">
        				<div class="form-body">
            			<div class="row" style="height: 50px;">
                			<!-- <div class="col-md-4">
                    			<div class="form-group">
                        			<input class="form-control " name="alarmName" type="text" placeholder="请输入名称搜索" style="margin-left: 15px;margin-right: 40px;">
                    			</div>
                			</div>
			                <div class="col-md-4">
			                    <div class="form-group">
			                        <input class="form-control" type="text"> 
			                    </div>
			                </div>
			                <div class="col-md-4">
			                    <span>&nbsp;至 &nbsp; </span>
			                </div>
			                 <div class="col-md-4">
			                    <div class="form-group">
			                        <input class="form-control" type="text">
			                    </div>
			                </div>
			                <div class="col-md-4">
			                    <div class="form-group">
			                        <button class="btn btn-primary hisSearchBtn" style="display: block" type="submit">查询</button>
			                    </div>
			                </div> -->
            		</div>
        			</div>
   
    				<div class="portlet-body">
        			<div class="primeng-datatable-container">
        				<div class="table-scrollable">
                		<table class="table alarmTable table_list ">
                		<thead class="ng-tns-c3-5">
		                    <tr class="ng-tns-c3-5">
		                        <th class="ng-tns-c3-5">名称</th>
		                        <th class="ng-tns-c3-5">状态</th>
		                        <th class="ng-tns-c3-5">报警内容</th>
		                        <th class="ng-tns-c3-5">值</th>
		                        <th class="ng-tns-c3-5">报警时间</th>
		                       
		                    </tr>
		                	</thead>
              					<tbody class="ng-tns-c3-5" id="history_warn">
              					</tbody>
         						</table>
         						</div>
            			
        			</div>
    				</div>
					</div>
					</historyalarm>
                   </tab>                        
                   <tab  class="ng-tns-c2-0 m-tabs__item tab-pane hide">
                   <historydata _ngcontent-c2="" _nghost-c5="" class="ng-tns-c2-0">
                   <div class="hisortyAlarmTable" >
        			<div class="form-body">
        				<div class="row" style="height: 50px;">
        				<div class="col-md-4">
			                 <div class="form-group">
			                        <select id="qry_channel" style="    width: 200px;height: 30px;margin-left: 30px;"></select>
			                  </div>
			              </div>
        				 <div class="col-md-4">
			                 <div class="form-group">
			                        <button class="btn btn-primary hisSearchBtn"  onclick="getHistoryDataList()">查询</button>
			                  </div>
			              </div>
			             </div>
        			</div>
    				<div class="primeng-datatable-container hdata-list" id="">
        			<div  class="ui-datatable ui-widget">
            		<div class="table-scrollable">
                	<table  class="table_list">
                    	<thead  class="ui-datatable-thead" id="historyData_head"></thead>
                    	<tbody  class="" id="historyData_body"></tbody>
                	</table>
           			</div>
       				</div>
    				</div>    
    				</div>
					</historydata>
                    </tab>
<!--     <div _ngcontent-c5="" class="hdata-chart" id="historyDataChart" hidden="" style="overflow: hidden; text-align: left;">
    <div class="amcharts-main-div" style="position: relative;">
    <div style="overflow: hidden; position: relative; text-align: left;">
    </div><div class="amcharts-chart-div" style="overflow: hidden; position: relative; text-align: left; height: 0px;">
    <svg version="1.1" style="position: absolute; width: 10px; height: 10px;">
    <desc>JavaScript chart by amCharts 3.14.5</desc
    ><g>
    <path cs="100,100" d="M0.5,0.5 L-0.5,0.5 L-0.5,-0.5 L0.5,-0.5 Z" fill="#FFFFFF" stroke="#000000" fill-opacity="0" stroke-width="1" stroke-opacity="0"></path>
    <path cs="100,100" d="M0.5,0.5 L0.5,0.5 L0.5,0.5 L0.5,0.5 L0.5,0.5 Z" fill="#FFFFFF" stroke="#000000" fill-opacity="0" stroke-width="1" stroke-opacity="0" transform="translate(60,20)">
    </path></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g><g></g></g><g></g><g></g><g></g>
    </svg><a href="http://www.amcharts.com/javascript-charts/" title="" style="position: absolute; text-decoration: none; color: rgb(0, 0, 0); font-family: Verdana; font-size: 11px; opacity: 0.7; display: block; left: 65px; top: 25px;"></a>
    </div></div></div> -->
   

                   <tab class="ng-tns-c2-0 m-tabs__item tab-pane hide">
                    	<device-maintenance-plan class="ng-tns-c2-0">
                    	<div class="device-maintenancePlan" id="deviceMaintenancePlan" style="position: static; zoom: 1;">
    					<div  class="form-group">
	        				<h5 >基本信息</h5>
       					 	<div class="row">
            					<div  class="col-xl-3">
                					<label  class="form-label">设备名称:</label>
                					<div  class="devicePlan-info" data-name="name"> </div>
            					</div>
	           					<div class="col-xl-3">
	                				<label class="form-label">设备序列号:</label>
	                				<div  class="devicePlan-info" data-name="serialNumber"></div>
	            				</div>
	           		 			<div  class="col-xl-3">
	                				<label  class="form-label">设备型号:</label>
	                				<div  class="devicePlan-info" data-name="modelName" ></div>
	           					 </div>
	            				<div  class="col-xl-3">
	                				<label  class="form-label">通讯设备:</label>
	                				<div  class="devicePlan-info" data-name="commTypeName">FBox</div>
	            				</div>
        					</div>
       						<div class="row">
            					<div class="col-xl-3">
                					<label  class="form-label">通讯设备序列号:</label>
                					<div  class="devicePlan-info" data-name="commSerialNumber"></div>
            					</div>
	            				<div  class="col-xl-3">
					                <label  class="form-label">设备地址:</label>
					                <div class="devicePlan-info" data-name="address"></div>
					            </div>
					            <!----><div class="col-xl-3">
					                <label class="form-label">客户:</label>
					                <div  class="devicePlan-info" data-name="username"></div>
					            </div>
					            <div  class="col-xl-3">
					                <label  class="form-label">客户联系方式:</label>
					                <div  class="devicePlan-info" data-name="tt"></div>
					            </div>
        					</div>

	   					</div>
    					<!-- <h5 >维保参数</h5>
    					<div  class="m--padding-bottom-10">
        					<div class="maintenancePlanTitle">
            					<span  class="planName">设备未制定维保计划</span>
        					</div>
    					</div> -->
						</div>
						</device-maintenance-plan>
                    </tab>
                    
                     <tab  class="ng-tns-c2-4 m-tabs__item  tab-pane  hide">
                    	<maintenance-records  class="ng-tns-c3-5 ng-tns-c2-4">
                     	<div class="currentAlarm-portlet-table" id="maintenance-records">
    						<div class="portlet-body">
       							<div class="table-scrollable">
            						<table class="table alarmTable table_list ">
					                	<thead class="ng-tns-c3-5">
					                    <tr class="ng-tns-c3-5">
					                        <th class="ng-tns-c3-5">工单号</th>
					                        <th class="ng-tns-c3-5">工单类型</th>
					                        <th class="ng-tns-c3-5">工单描述</th>
					                        <th class="ng-tns-c3-5">状态</th>
					                        <th class="ng-tns-c3-5">维保人</th>
					                    </tr>
					                	</thead>
	                					<tbody class="ng-tns-c3-5" id="work_order">
	                					</tbody>
            						</table>
        					 	</div>
   						 	</div>
						</div>
						</maintenance-records>
                    </tab>
                    
                    </div> 
                </tabset>
            </div>
        </div>
    	</div>
            
					
  				


				 
				
				
				<!-- 添加或修改 -->
				
				
			</div>
		</div>
		

	
	</body>
	<script type="text/javascript" src="../js/jquery-1.10.2.min.js"></script>
	<script type="text/javascript" src="../js/common.js"></script>
	<script type="text/javascript" src="../js/dialog.js"></script>
	<script type="text/javascript" src="../js/jquery-data.js"></script>
	<script type="text/javascript" src="../js/jquery.ztree.core-3.5.js"></script>
	<script type="text/javascript" src="../js/jquery.ztree.excheck-3.5.js"></script>
	<script type="text/javascript" src="../js/cookieUtil.js"></script>
	
	<script type="text/javascript">
	
	$(document).ready(function(){
		qryItemList(2);
		var cookie_device_id = readCookie("device_id");
		console.log(cookie_device_id);
		if(cookie_device_id){
			delCookie("device_id");
			var zTree = $.fn.zTree.getZTreeObj("treeDemo");
			var node = zTree.getNodeByParam("id",cookie_device_id);
			console.log(node);
			zTree.selectNode(node);//选择点  
			node.font={'color':"red"};
			zTree.updateNode(node);
            zTree.setting.callback.onClick(null, zTree.setting.treeId, node);//调用事件  
			
		}
	});
	var IDMark_A = "_a";
	var device_id =0;
	var lastValue = "", nodeList = [],parentNodeList=[], fontCss = {},ztreeList;
	var device_map ={};
	var setting = {
			view: {
				fontCss: getFontCss,
				addDiyDom: addDiyDom
			},
			data: {
				simpleData: {
					enable: true
				}
			},
			callback: {
				//beforeClick: beforeClick,
				onClick: onClick
			}
		};

	$(".btn-secondary").click(function(){
		$(".btn-secondary").removeClass("btnActive")
		var type = $(this).attr("data-status");
		$(this).addClass("btnActive");
		qryItemList(type);
	});
	
	$(".nav-item").click(function(){
		$(".nav-link").removeClass("active")
		var type = $(this).attr("data-status");
		$(this).children("a").addClass("active");
		
		$("tab").addClass("hide").hide();
		$("" +$(this).attr("data-name")).parent("tab").removeClass("hide").show();
		console.log($(this).index());
		handleNavRnvent($(this).index());
	});
	
	function handleNavRnvent(index){
		if(device_id < 1) return;
		var warnNum = 0;
		if(index == 0){//获取当前报警数
			var result  = common_ajax('getCurrAlarmRecordList',{id:device_id});
			var html_ = "";
			if(result ){
				for(var i=0;i<result.length ;i++){
					var item = result[i];
					warnNum ++;
					html_ += '<tr data-status ="'+ item.i+'"><td>'
				
					+ item.name
					+ '</td><td>' //0：无，1：触发，2：确定，3:还原

					+ replaceNull(item.status == 0?"无":item.status==1?"触发":item.status==2?"确定":"还原")
					+ '</td><td>' 
					+ replaceNull(item.content)
					+ '</td><td>' 
					+ replaceNull(item.value)
					+ '</td><td>' 
					+ formatToDateTime(parseInt(item.eventTime))
					+ '</td><td>' 
					+ '</td></tr>';
				}
			}
			$("#warn_count").text(warnNum);
			
			$("#curr_warn").html(html_);
		}
		
		else if(index == 1){//获取当前报警数
			var result  = common_ajax('getAlarmRecordList',{id:device_id});
			var html_ = "";
			if(result ){
				for(var i=0;i<result.length ;i++){
					var item = result[i];
					warnNum ++;
					html_ += '<tr data-status ="'+ item.i+'"><td>'
					
					+ item.name
					+ '</td><td>' //0：无，1：触发，2：确定，3:还原

					+ replaceNull(item.status == 0?"无":item.status==1?"触发":item.status==2?"确定":"还原")
					+ '</td><td>' 
					+ replaceNull(item.content)
					+ '</td><td>' 
					+ replaceNull(item.value)
					+ '</td><td>' 
					+ formatToDateTime(parseInt(item.eventTime))
					+ '</td><td>' 
					+ '</td></tr>';
				}
			}
			
			$("#history_warn").html(html_);
		}
		if(index == 2){//获取历史数据
			
			getHistoryDataList();
			
		}
		if(index == 4){//获取维保
			console.log("---------");
			var result  = common_ajax('../work/qryWorkOrderList',{deviceId:device_id,yema:1,length:100});
			console.log(result);
			var html_ = "";
			if(result.pageList){
				for(var i=0;i<result.pageList.length ;i++){
					var item = result.pageList[i];
					html_ += '<tr data-status ="'+ item.id+'"><td>'
					+ item.orderNo
					+ '</td><td>' 
					+ (item.orderType == 1?"常规保养":"故障维修")
					+ '</td><td>' 
					+ replaceNull(item.description)
					+ '</td><td>' 
					+ (item.status == 1?"已派单":item.status == 2?"已接单":"已完成")
					+'</td><td>'
					+ replaceNull(item.attendant)
					+ '</td></tr>';
				}
			}
			
			$("#work_order").html(html_);
		}
	}
	
	function getHistoryDataList(){
		var channel = $("#qry_channel").val();
		channel = channel.substr(1,channel.length);
	console.log(channel);
		var result  = common_ajax('getHistoryDataList',{id:device_id,channel:channel});
		var html_ = "<tr><th>序号</th><th>时间</th>";
		console.log(result);
		$("#historyData_head,#historyData_body").html("");
		if(result ){
			for(var i=0;i<result.header.length ;i++){
				//var item = result[i];
				html_ += "<th>" + result.header[i] +"</th>";
			}
			html_ +="</tr>";
			$("#historyData_head").html(html_);
			html_ = "";
			for(var i=0;i<result.body.length ;i++){
				var item = result.body[i];
				html_ += "<tr><td>" + (i+1) 
					  + "</td><td>"
					  + formatToDateTime(parseInt(item.time))+"</td>";
				for(var j=0;j<item.column.length ;j++){
					html_ += "<td>" + item.column[j] + "</td>";
				}
				html_ += "</tr>";
			}
			$("#historyData_body").html(html_);
		}
	}
	function qryItemList(type_){
		var data = {type:type_};
		var result = common_ajax('getDeviceList',data);
		console.log(result);
		var name = "";
		var value = null;
		var index = 0;
		var zNodes =[];	
		
		for ( var key in result) { 
			//console.log("key="+key +" |value = "+ result[key]);
			index ++;
			var node={};
			node.id= "u_" + index;
			node.name = key;
			node.open=true;
			node.pId= "0";
			value = result[key];
			if(value){
				for(var i=0;i<value.length;i++){
					//console.log(value[i]);
					var node_={};
					node_.id= value[i].id
					node_.name = value[i].name
					node_.pId= "u_" + index;
					node_.open=true;
					console.log(value[i]);
					if(value[i].state==1){
    					node_.icon = "../images/unbound-tree-icon.png";
					}else{
						node_.icon = "../images/Unbundling.png";
					}
					
					zNodes.push(node_);
					device_map[node_.id] = value[i];
				}
			}
			zNodes.push(node);
		}
		//console.log(zNodes);
		$.fn.zTree.init($("#treeDemo"), setting, zNodes);
	}
	
	function deviceListCallback(){}
	
	function addDiyDom(treeId, treeNode) {
		if (treeNode.parentNode && treeNode.parentNode.id!=2) return;
		if(treeNode.status > 0) return;
		
	}
	
	function updateNodes(highlight) {//更新节点颜色
		var zTree = $.fn.zTree.getZTreeObj("treeDemo");
		for( var i=0, l=nodeList.length; i<l; i++) {
			nodeList[i].highlight = highlight;
			zTree.updateNode(nodeList[i]);
		}
	}
	function getFontCss(treeId, treeNode) {//#A60000
		return (!!treeNode.highlight) ? {color:"#4a86e8", "font-weight":"bold"} : {color:"#333", "font-weight":"normal"};
	}
	
	
	function searchNode(e) {//搜索节点
		var zTree = $.fn.zTree.getZTreeObj("treeDemo");
		var key = $("#key");
		var value = $.trim(key.get(0).value);
		var keyType = "name";
		
		if (key.hasClass("empty")) {
			value = "";
		}
		if (lastValue === value) return;
		lastValue = value;
		if (value === "") return;
		updateNodes(false);	
		expandNodes(false);
		parentNodeList = [];
		nodeList = zTree.getNodesByParamFuzzy(keyType, value);
		
		if(nodeList != null){
			for(var i=0;i<nodeList.length;i++){
				getParentNodes(nodeList[i]);
			}
		}
		updateNodes(true);
		expandNodes(true);

	}
	
	
	
	function expandNodes(highlight) {//展开/和节点
		var zTree = $.fn.zTree.getZTreeObj("treeDemo");
		if(highlight){
			for( var i=0, l= parentNodeList.length; i<l; i++) {
				zTree.expandNode(parentNodeList[i], true, false, false);
			}
		}else{
			for( var i=0, l= parentNodeList.length; i<l; i++) {
				//console.log("=="+parentNodeList[i]);
				if(parentNodeList[i].level != 0){
					zTree.expandNode(parentNodeList[i], false, false, false);
					
				}
			}
		}
		
	}
	
	
	function getParentNodes(node){//获取父节点
		//console.log(node);
		var parentNode = node.getParentNode();
		if(parentNode){
			parentNodeList.push(parentNode);
			getParentNodes(parentNode);
		}
	}
	
	function onClick(event, treeId, treeNode, clickFlag) {
		var isParent = treeNode.isParent;
		if(!isParent){
			var aObj = $("#" + treeNode.tId + IDMark_A);
			 console.log(aObj);
			 $("#treeDemo a").removeClass("red");
			 aObj.addClass("red")
			//console.log(treeNode.id);
			device_id = treeNode.id
			var device = device_map[treeNode.id];
			$("h3").text(device.name);
			$("span[data-name='model_name']").text(device.modelName);
			$("span[data-name='serialNumber']").text(device.serialNumber);
			$("span[data-name='address']").text(device.address);
			$("span[data-name='mark']").text(device.mark);
			$(".devicePlan-info").each(function(){
				$(this).text(replaceNull(device[$(this).attr("data-name")]));
			});
			console.log("---------"+device.boxId);
				var pic_url = "http://o8cc2eo80.bkt.clouddn.com//temp/1c6a65af9db64dfe81da0b62a34b0d6e.png";
			if(device.boxId){
				console.log(device.picUrl);
				pic_url = device.picUrl;
				if(device.picUrl == null || device.picUrl ==""){
					pic_url = "http://huanrun.yunzutai.com:22743/Uploads/Files/2018/2/26/0764045707da47958b2485b6371aca72.jpg"
				}
				
				console.log(pic_url);
			}
			console.log(pic_url);
				$("#device_img").attr("src",pic_url);
				$(".nav-item").eq(0).click();
			// handleNavRnvent(0);
		 var result  = common_ajax('getCurrentDataList',{id:device_id});
			var list_html = "",list_html2 ="";
			
			//result = JSON.parse(result);
			console.log("-------------------"+result);
			console.log("-------------------"+result.data);
			var data = result.data;
			var map_ = result.map;
			var name = "";	
			var realData = "";
			for ( var key in data) { 
				name = data[key].split("_")[0];
				console.log("--------------++---"+key);
				console.log("--------------++---"+data[key]);
				realData = formmatData(key,data[key].split("_")[1],map_[key]);
				if(name.toLowerCase().indexOf("mn") > -1){
					name = name.replace("mn","").replace("MN","");
				 list_html += "<tr><td>"+name+"</td><td>"+realData+"</td></tr>";
				}else{
					name = name.replace("zt","").replace("ZT","");
					if(realData == 0){
						realData = "<img src = '../images/red.png' />"; 
					}else if(realData == 1){
						realData = "<img src = '../images/greens.png' />"; 
					}
					list_html2 += "<tr><td>"+name+"</td><td>"+realData+"</td></tr>";
				}

			}
			$("#current_data").html(list_html); 
			$("#current_data_zt").html(list_html2); 
			
			qryChannel(); 
		}
	}
	
	function formmatData(key,value,mapValue){
		console.log(key+"-"+value+mapValue);
		console.log(value)
		console.log(!!value)
		if(!mapValue) return  replaceNull(value);
		if(mapValue.fracDigits){
			var n = mapValue.fracDigits;
			value = value /(Math.pow(10,n))
		}
		if(mapValue.unit){
			value = value + mapValue.unit;
		}
		return replaceNull(value);
	}
	
	function qryChannel(){
		var result  = common_ajax('qryChannel',{id:device_id});
		$("#qry_channel").html("");
		if(result){
			var html_ = "";
			for(var i=0;i<result.length ;i++){
				html_ += "<option value='_"+result[i].uid+"'>"+result[i].name +"</option>";
			}
			$("#qry_channel").html(html_);
		} 
	}
	
	$("#key").keyup(function(){ 
		if(event.keyCode == 13){ //这里写你要执行的事件;
			searchNode();
		} 
	});
	

	</script>
</html>
